<template>
  <div class="icon_uploader_wrap">
    <el-upload
      ref="iconUploader"
      class="icon_uploader"
      accept=".jpg,.jpeg,.png,.gif"
      action
      :on-change="uploadImg"
      :http-request="uploadImg"
      :multiple="multiple"
      :auto-upload="false"
      :show-file-list="false"
    >
      <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
  </div>
</template>
<script>
import siteAPI from '@/apis/site';
import { mapState } from 'vuex';
import IconUploadMixin from '@/components/common/icon/icon-upload-mixin.js';

export default {
  components: {},
  mixins: [IconUploadMixin],
  props: {
    multiple: {
      type: Boolean,
      default: false,
    },
    cateId: {
      type: String,
      default: '',
    },
  },
  emits: ['uploadComplete'],
  data() {
    return {};
  },
  watch: {},
  methods: {
    uploadImg(file) {
      const obj = { file: file.raw, type: 6, cateId: this.cateId };
      this.uploadImageData(obj).then(res => {
        this.$emit('uploadComplete', res);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.icon_uploader_wrap {
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  &:hover {
    border-color: #409eff;
  }
  .icon_uploader {
    width: 100%;
    height: 100%;
    :deep(.el-upload) {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
